<template>
  <div id="app">
		<div id="login">
			<div id="left">
						<img src="../../assets/login/register.jpg" alt="">
					</div>
					<div id="right">
						<div class="dl">
							注册
						</div>
						<div class="cen">
							<el-input
							placeholder="请输入电话"
							type="text"
							tabindex=1
							v-model="phone"
							@change="phoneregular"
							prefix-icon="el-icon-phone"
							>
							
							</el-input>
							<input
							disabled="disabled"
							type="text"
							tabindex=-1
							v-model="phoneerr"
							style="color:#FF0000;text-align: center;"
							>
						</div>
						<div class="cen">
							<el-input
							placeholder="请输入名称"
							type="text"
							tabindex=1
							v-model="name"
							@change="nameregular"
							prefix-icon="el-icon-s-custom"
							>
							
							</el-input>
							<input
							disabled="disabled"
							type="text"
							tabindex=-1
							v-model="nameerr"
							style="color:#FF0000;text-align: center;"
							>
						</div>
						<div class="cen">
							<el-input
							placeholder="请输入密码"
							@change="passwordregular"
							:show-password="isshow"
							tabindex=1
							type="text"
							v-model="password"
							prefix-icon="el-icon-unlock"
							>							
							</el-input>
							<input
							disabled="disabled"
							type="text"
							v-model="passworderr"
							style="color:#FF0000;text-align: center;"
							>
						</div>
						<div class="cen">
							<el-input
							placeholder="请确认密码"
							@change="ispasswordregular"
							:show-password="isshow"
							type="text"
							tabindex=1
							v-model="ispassword"
							prefix-icon="el-icon-unlock"
							>							
							</el-input>
							<input
							disabled="disabled"
							type="text"
							v-model="ispassworderr"
							style="color:#FF0000;text-align: center;"
							>
						</div>
						<div class="cen">
							<el-input
							placeholder="请输入您的邮箱"
							@change="emailregular"
							type="text"
							tabindex=1
							v-model="email"
							prefix-icon="el-icon-message"
							>							
							</el-input>
							<input
							disabled="disabled"
							type="text"
							v-model="emailerr"
							style="color:#FF0000;text-align: center;"
							>
						</div>
						<div class="btn">
							<el-button
							style="width: 100%;
							text-align: center;
							color: white;							
							background-color: #333333!important;"
							v-bind:round="round"
							tabindex=1
							@click="subm"
							>
								注册
							</el-button>
						</div>
						<div class="bot">
							<div>
								<input type="checkbox">
								<span style="cursor: default;">请详细并知晓</span>
								<span style="color: #212224;">＜注册协议＞</span>
							</div>
							<div>
								<span style="color:#999;cursor: default ;">已有账号,</span>
								<span @click=getlogin>去登录</span>
							</div>
						</div>
					</div>
			
		</div>
  </div>
</template>

<script>
	export default{
		data(){
			return{
				phone:'',
				phoneerr:'',
				name:'',
				nameerr:'',				
				password:'',
				passworderr:'',
				ispassword:'',
				ispassworderr:'',
				email:'',
				emailerr:'',
				isshow:true,
				round:true
			}
		},
		methods:{
			getlogin(){
				location.href="login.html"
		},
		phoneregular(){
			let reg=/^1(3|4|5|7|8)\d{9}$/;
			if(reg.test(this.phone)){
				this.phoneerr='';
			}else{
				this.phoneerr='电话号码不正确'
			}	
		},
		nameregular(){
			let reg=/^[-_a-zA-Z0-9]{4,16}$/;
			if(reg.test(this.name)){
				this.nameerr='';
			}else{
				this.nameerr='用户名不正确'
			}	
		},
		passwordregular(){
			let reg=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
			if(reg.test(this.password)){
				this.passworderr='';
			}else{
				this.passworderr='密码至少包含 数字和英文，长度6-20'
			}
		},
		ispasswordregular(){
			if(this.password==this.ispassword){
				this.ispassworderr='';
			}else{
				this.ispassworderr='密码要保持一致'
			}
		},
		emailregular(){
			let reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
			if(reg.test(this.email)){
				this.emailerr='';
			}else{
				this.emailerr='请输入正确的邮箱'
			}
		},
		subm(){
			if(this.passworderr==''&&this.phoneerr==''&&this.ispassworderr==''&&this.emailerr==''&&this.password!==''&&this.ispassword!==''&&this.email!==''&&this.name!==''&&this.nameerr=='')
			{
				this.axios({
					method:'post',
					url:'http://129.28.184.223:8080//register.do',
					data:{
						userEmail:this.email,
						userName:this.name,
						userPassword:this.password,
						userTel:this.phone
					}
				}).then(function(res){
					if(res.data.msg==3){
						alert('注册成功');
					}else if(res.data.msg==-1){
						alert('邮箱重复')
					}else{
						alert('注册失败')
					}
				}).catch((err)=>{
					console.log(err);
				})
			}else{
				alert('请正确填写上面的信息')
			}
		}
	}
}
</script>

<style lang="less">
@import '../../utils/css/reset.css';
@import '../../theme/style.less';
</style>
<style>
	input:disabled{
		background-color: white;
	}
	#app{
		width: 90%;
		height: 100%;
		margin: 0 auto;
		overflow: hidden;
	}
	#left,#right{
		display: inline-block;
		width: 45%;
		margin: 2%;
		vertical-align: top;
	}
	#left img{
		width: 90%;
	}
	#right{
		padding: 30px 0;
		font-size: 15px;
	}
	#right .dl{
		font-weight: bold;
		font-size: 20px;
		color: #666666;
		margin-bottom: 70px;
	}
	
	input.el-input__inner{
		overflow: hidden;
		margin-left:30px;
		height: 30px;
		line-height: 30px;
		font-size: 15px;
		border: none;
		width: 80%;
		}
		.el-input__prefix{
			width: 30px;
			height: 30px;
		}
		i::before{
			font-size: 30px;
			line-height: 30px;
			margin-bottom: 0;
		}
		.btn{
			margin-top:30px;
			width: 80%;
			height: 40px;
		}
		.bot{
			width: 80% ;
			margin: 0;
			margin-top: 10px;
			display: flex;
			flex-direction:row;
			justify-content: space-between;
		}
		.bot div{
			font-size: 12px;
			color: #999;
			flex: 1;
		}
		.bot div:nth-child(2){
			text-align: right;
			color: #333;
		}
		.bot div span{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			cursor: pointer;
		}
</style>
